<template>
    <div class="my-container w-full h-full">
      <div class="top h-1/6">
        <div class="back" @click="$router.push('/')">
          <img class="w-8 lg:w-12 xl:w-[3vw] ml-4 shrink-0 object-contain cursor-pointer" src="/images/backIcon.png" alt="" @click="back" />
          <span class="shrink-0 ml-2 lg:text-3xl xl:text-[2vw] xl:ml-4 cursor-pointer">返回</span>
        </div>
        <h2 class="text-2xl lg:text-[4vw] xl:text-[3vw] font-bold">右手脉象采集</h2>
      </div>
      <div class="w-full h-5/6 flex justify-center items-center">
        <div class="w-full flex h-full xl:w-5/6">
          <div class="w-1/2 h-full shrink-0">
              <img class="w-full h-full object-contain" src="/images/mai.png" alt="" />
          </div> 
          <div class="w-1/2 words flex flex-col justify-center p-4 lg:p-8 shrink-0">
            <h1 class="text-2xl lg:text-4xl font-bold ">脉诊仪{{ statText }}</h1>
            <p class="my-8 lg:text-2xl lg:my-16">1. 打开脉诊仪电源</p>
            <p class="mb-8 lg:text-2xl lg:mb-16">2. 找到脉搏位置</p>
            <p class="mb-8 lg:text-2xl lg:mb-16">3. 佩戴脉诊仪，并再次确认脉搏处于检测口中间位置</p>
            <div class="my-btn h-[50px] lg:h-[80px] lg:text-2xl" @click="connectBle" v-if="!isConnect">
              <p class="">连接脉诊仪</p>
            </div>
            <div class="my-btn h-[50px] lg:h-[80px] lg:text-2xl" @click="startTest" v-if="isConnect">
              <p v-if="taskStat == 0">开始检测</p>
              <p v-if="taskStat == 1">检测完成</p>
              <p v-if="taskStat == 2">检测中,请等待</p>
              <p v-if="taskStat == 3">上传数据中,请等待</p>
            </div>
          </div>
        </div>
      </div>
      <MyAlert ref="myAlert" />
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted ,watch} from "vue";
  import { useRouter } from "vue-router";
  import MyAlert from "@/components/alert/index.vue";
  import { fetchSetMaiLeft, fetchSetMaiRight } from "@/assets/api/index.js";
  import { send2Device, getDevice, searchDevice } from "@/assets/utils/index.js";
  const baseUrl = import.meta.env.BASE_URL
  
  const router = useRouter();
  const myAlert = ref();
  
  const stat = ref(0);
  const taskStat = ref(0);
  const isConnect = ref(false);
  
  const statText = computed(() => {
    let textList = ["未连接", "已连接", "连接中..."];
    return textList[stat.value];
  });
  watch(isConnect,(newVal,oldVal)=>{
  if(newVal){
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/right_mai.mp3'
                audio.muted = false;
                audio.play();
    },200)
  }
})
  const sendMaiData = async () => {
    taskStat.value = 3
    let res = await fetchSetMaiRight({
      data: window.testRes,
    });
    if (res.code !== 0) {
      taskStat.value = 1;
      return myAlert.value.showAlert(res.message);
    }
    taskStat.value = 1;
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/right_mai_complate.mp3'
                audio.muted = false;
                audio.play();
    },200)
    router.push("/");
  };
  const connectBLETest = ()=>{
  getDevice(() => {
        stat.value = 1;
        isConnect.value = true;
      })
}
  // const getStatText = (stat) => {
  //     let textList = ["未连接", "已连接", "连接中"];
  // }
  const startTest = () => {
    if (!isConnect.value) {
      return;
    }
    if (taskStat.value == 3 || taskStat.value == 2 || taskStat.value == 1) {
      return;
    }
    taskStat.value = 2;
    send2Device(() => {
      // handleTaskSuc()
      sendMaiData();
    });
  };
  const handleTaskSuc = () => {
    console.log("脉诊已完成");
    taskStat.value = 1;
  };
  const connectBle = async () => {
    try {
      if (isConnect.value) {
        stat.value = 2;
        return getDevice(() => {
          stat.value = 1;
          isConnect.value = true;
        });
      }
      stat.value = 2;
      await searchDevice(() => {
        stat.value = 1;
        isConnect.value = true;
      });
    } catch (e) {
      console.log(e);
      stat.value = 0;
      isConnect.value = false;
      myAlert.value.showAlert("连接脉诊仪失败");
    } finally {
      console.log("finally");
    }
  };

  onMounted(()=>{
    connectBLETest()
  })
  </script>
  
  <style scoped>
  .my-container .top {
    width: 100%;
    height: 15%;
    /* background: white; */
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* color: white; */
  }
  
  .top .back {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .top .back img {
    width: min(4vw, 40px);
    margin: 0 5px;
    margin-left: 20px;
  }
  
  .back span {
    font-size: min(3vw, 30px);
  }
  
  .top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(4vw, 40px);
  }
  
  .my-btn {
    cursor: pointer;
  
    background: linear-gradient(to right, rgb(19, 167, 255), rgb(14, 143, 255));
    /* background: blue; */
    border-radius: 200px;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  
    flex-shrink: 0;
  }
  </style>
  